<template>
  <div>
    <div class="main">
      <div class="sczl">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div class="content-title">信息确认</div>
          <!-- <div style="display: flex;align-items: center;cursor: pointer;">
            <img class="zcImg" src="../../../assets/zc.png" width="16" alt="">
            <div class="zcText">暂存</div>
          </div> -->
        </div>
        <el-divider></el-divider>
        <el-descriptions>
          <el-descriptions-item label="义务人类型">{{currentProject.applyType == '0' ? '自然人':'法人'}}</el-descriptions-item>
          <el-descriptions-item label="义务人名称">{{currentProject.ywrMc}}</el-descriptions-item>
          <el-descriptions-item label="证件类型">{{currentProject.ywrZjlx}}</el-descriptions-item>
          <el-descriptions-item label="证件号码" :span="2">{{currentProject.ywrZjh}}</el-descriptions-item>
          <el-descriptions-item label="联系电话" :span="24">{{currentProject.ywrPhone}}</el-descriptions-item>
          <!-- <el-descriptions-item label="申请复垦项目" :span="24">{{currentProject.sqfkxm}}</el-descriptions-item> -->
          <el-descriptions-item label="项目名称" :span="24">{{currentProject.projectName}}</el-descriptions-item>
              <el-descriptions-item label="用地位置" :span="24">{{currentProject.ydwz}}</el-descriptions-item>
              <el-descriptions-item label="批准文号">{{currentProject.pzwh}}</el-descriptions-item>
              <el-descriptions-item label="区县名称">{{currentProject.qxmc}}</el-descriptions-item>
              <el-descriptions-item label="批复总面积">{{currentProject.pfmj}}</el-descriptions-item>
              <el-descriptions-item label="申请验收面积">{{currentProject.sqysmj}}</el-descriptions-item>
              <el-descriptions-item label="批准日期" >{{currentProject.pzrq}}</el-descriptions-item>
              <el-descriptions-item label="到期时间" >{{currentProject.dqrq}}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div class="content-title">附件确认</div>
        </div>
        <el-divider></el-divider>
        <!-- <el-descriptions :colon="false">
          <el-descriptions-item label="" :span="24">土地复垦义务人验收申请</el-descriptions-item>
          <el-descriptions-item label="" :span="24">土地复垦方案和工程规划设计批文件</el-descriptions-item>
          <el-descriptions-item label="" :span="24">土地工程实施前后对比照片</el-descriptions-item>
          <el-descriptions-item label="" :span="24">土地所有权确认意见及交地资料</el-descriptions-item>
          <el-descriptions-item label="" :span="24">竣工资料</el-descriptions-item>
          <el-descriptions-item label="" :span="24">坐标串txt文件</el-descriptions-item>
        </el-descriptions> -->
        <div>
          <div class="file-item" v-for="(item,idx) in tableData" :key="idx">
            <div class="file-title">{{item.name}}</div>
            <div class="file-box">
              <div class="file-name" v-for="(file,i) in item.files" :key="`file${i}`">
                {{file}}
              </div>
            </div>
          </div>
        </div>
        <el-footer style="text-align: center;margin-top: 10px;">
          <el-button type="info" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goNext" :disabled="disable" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
        </el-footer>
      </div>
    </div>
  </div>
</template>

<script>
import service from "@/service/apiService";
export default {
  data() {
    return {
      fullscreenLoading:false,
      disable:false,
      rules: {},
      tableData: [],
      currentProject:{
        applyType:''
      },
    }
  },
  mounted(){
    let project = window.localStorage.getItem('currentProject')
    this.currentProject = JSON.parse(project)
    this.getFileData()
  },
  methods: {
    getFileData(){
      this.tableData = []
      service.getFileByProjectId({
        dictCode:'yysq-fjlx',
        ywbh:this.currentProject.id,
      }).then(res=>{
        let data = res.data
        let tempData = Object.keys(data)
        tempData.forEach(item=>{
          let val = {
            name:item,
            files:data[item]
          }
          this.tableData.push(val)
        })
      }).catch(err=>{
        
      })
    },
    goNext() {
      this.disable = true
      this.fullscreenLoading = true;
      service.pushFileToPC({
        projectNo:this.currentProject.projectNo,
        id:this.currentProject.id
      }).then(res=>{
        this.disable = false
        this.fullscreenLoading = false;
        this.$emit('goStep')
      }).catch(err=>{
        this.disable = false
        this.fullscreenLoading = false;
        this.$message.error(err);
      })
      
    },
    goBack() {
      this.$emit('goBack')
    },
    rowClassName({ row, rowIndex }) {
      row.xh = rowIndex + 1;
      if (row.xh < 10) {
        row.xh = "0" + row.xh;
      }
    },
  }
}
</script>

<style scoped lang="less">
/deep/ .el-button--primary{
  background-color: #0c7cff !important;
}

.demo-ruleForm {
  // padding: 0px 15px;
}

/deep/.el-divider--horizontal {
  margin: 15px 0;
}
.file-item{
  display: flex;
  font-size: 14px;
  padding: 4px;
  .file-title{
    width: 250px;
    font-size: 600;
  }
  .file-box{
    display: flex;
    color: red;
    .file-name{
      margin-right: 10px;
    }
  }
}

.stuff {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: #2789ee;
  padding-bottom: 5px;
}

.zcImg {
  margin-right: 5px;
}

.zcText {
  font-size: 16px;
  color: #2789ee;
}

.form-title {
  margin: 17px 0;
  width: 100%;
  height: 54px;
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
  box-sizing: border-box;
  padding: 0 30px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.content-title {
  font-size: 24px;
  color: #222;
  font-weight: 700;
}

.el-select {
  // width: 80%;
  /* 调整为所需的宽度 */
}

.el-input {
  // width: 80%;
  /* 调整为所需的宽度 */
}
</style>